<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>绑定中心</title>
    <script src="{{ asset('js/common.js') }}" type="text/javascript"></script>
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/ewin.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jweixin-1.0.0.js') }}" type="text/javascript"></script>

    <!-- Styles -->
    <style>
        .account-box {
            font-size: 16px;
            width: 100%;
        }
        .account-box .title {
            background: #dddddd9c;
            height: 50px;
            line-height: 50px;
        }

        .account-box .title span {
            padding-left: 20px;
            font-weight: bolder;
        }

        .account-box ul {
            list-style: none;
        }

        .account-box ul li {
            width: 100%;
            float: left;
            height: 100px;
            padding-left: 20px;
            line-height: 50px;
            border-bottom: 1px solid #ddd;
        }
        .account-box .account{
            width: 100%;
            float: left;
        }
        .account-box .account div{
            float: left;
        }
        .account-box .bind-time div{
            float: left;
        }
        .account-box .bind-time{
            width: 100%;
            float: left;
            margin-top: -10px;
        }


        .account-box .account-class div {
            float: left;
            margin-right: 10px;
        }

        .clear {
            clear: both;
            height: 0;
            font-size: 1px;
            line-height: 0px;
        }

    </style>
</head>
<body>
<div class='query-account' style='display:block;'>

    <div class="account-box">
        <div class="title"><span>卡号信息</span></div>
        <div class="account-list">
            <ul class="list-unstyled list-inline">

            </ul>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!-- loading -->
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                正在加载，请稍候...<span id="result"></span>
            </div>
        </div>
    </div>
</div>
<!--模态框组件-->
<div class="modal fade" id="myModal" style="margin-top: 50px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>提示</h3>
            </div>
            <div class="modal-body">
                <p id="message-content"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    wx.config({
        debug: false,
        appId: '{{$configData['appId']}}',
        timestamp: '{{$configData['timestamp']}}',
        nonceStr: '{{$configData['nonceStr']}}',
        signature: '{{$configData['signature']}}',
        jsApiList: [
            'checkJsApi',
            'openAddress'
        ]
    });

    // var getQueryString = function(name) {
    //     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    //     var r = window.location.search.substr(1).match(reg);
    //     if(r != null) return unescape(r[2]);
    //     return null;
    // };
    // var code = getQueryString('code');
    $('#loading').modal('show');
    $.ajax({
        type: "GET",
        contentType: "application/json;charset=UTF-8",
        headers: {
            'content-type': 'application/json'
        },
        url: URL+'/bindInfo',
        timeout: 60000,
        data: {action:'list'},
        success: function (res) {
            var arr = res.items;
            // console.log(arr);
            if (arr.length == 0) {
                $('#loading').modal('hide');
                $("#message-content").text("暂无信息");
                $("#myModal").modal();
            }

            var content = '';
            for (var i = 0; i < arr.length; i++) {
                content += '<li><div class="account" value='+arr[i].vc_account+'>' +
                    '<div class="account-title">卡号：</div>' +
                    '<div class="value">' + arr[i].vc_account + '</div></div><div class="bind-time">' +
                    '<div class="bind-time-title">绑定时间：</div>' +
                    ' <div class="value">' + arr[i].dt_bind_time + '</div>' +
                    '</div></li>';
            }
            $('.account-list .list-inline').empty();
            $('.account-list .list-inline').append(content);
            $('#loading').modal('hide');
            $('.account').click(function (e) {
                var sim = $(this).attr('value');
                $(location).attr('href', URL + '/recharge?action=detail&account=' + sim);
            });
        },
        //请求失败，包含具体的错误信息
        error: function (res) {
            $('#loading').modal('hide');
            if (!res) {
                $("#message-content").text("数据异常，请联系客服");
                $("#myModal").modal();
            } else {
                console.log(res);
                var message = res.message;
                $("#message-content").text(message);
                $("#myModal").modal();
            }

        }
    });
</script>

